<template>
  <div class="module_container">
    <div class="module_title"
         flex
    >
      <div class="title_text">信用激活人数</div>
      <div class="title_tab"
           flex
      >
        <div class="active">实时数据</div>
        <div>统计数据</div>
      </div>
    </div>
    <div class="module_content">
      <p class="margin_tb_32">本年度累计信用激活人数</p>
      <div class="margin_tb_32"
           flex="main:justify"
      >
        <div v-for="i in 8"
             :key="i"
             :class="i > 5 ? 'active' : ''"
             class="digit"
        >
          {{ [4,8,6][i-6] || 0 }}
        </div>
      </div>
      <div flex="main:justify cross:center"
           class="margin_top_10"
      >
        <img src="@/assets/img_xinyong/module1/icon.png">
        <div>
          <p style="color: #bfdaff">本月激活数</p>
          <p style="color: #fff;margin-to">
            <b style="font-size: 48px">486</b>
          </p>
        </div>
        <img src="@/assets/img_xinyong/module1/line.png"
             height="100px"
             alt=""
             srcset=""
        >
        <div>
          <p style="color: #bfdaff">同比</p>
          <p style="color: #ff2e33">--</p>
        </div>
        <img src="@/assets/img_xinyong/module1/line.png"
             height="100px"
             alt=""
             srcset=""
        >
        <div>
          <p style="color: #bfdaff">环比</p>
          <p style="color: #4aff89">--</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { list } from '@/api/fh/fhInfo'
export default {
  data() {
    return {
      inforData: {}
    }
  },
  created() {
    // list().then(res => {
    //   this.inforData = res.content[0]
    // })
  }
}
</script>

<style lang="scss" scoped>
.module_content {
  font-size: 32px;
  padding: 0 40px;
  .digit {
    background: url('~@/assets/img_xinyong/module1/digit_bg.png') no-repeat;
    background-size: 100% 100%;
    width: 80px;
    height: 126px;
    line-height: 126px;
    text-align: center;
    color: #39fff5;
    opacity: 0.4;
    text-shadow: 0 0 26px rgba(51, 216, 239, 0.52);
    font-size: 100px;
    &.active {
      opacity: 1;
    }
  }
}
</style>
